<template>
	<view>
		<!-- 病情描述 -->
		<!-- 顶部就诊人信息卡 -->
		<UserInfoCardVue></UserInfoCardVue>
		<view class="condition-page">


			<!-- 上次就诊情况 -->
			<view class="section-card">
				<view class="title-container">
					<view class="section-title">上次就诊情况</view>
					<view class="title-bg"></view>
				</view>
				<view class="form-row">
					<view class="form-label">上次就诊院区</view>
					<input class="form-input" v-model="form.lastCampusName" :placeholder-style="placeholderStyle"
						placeholder="请输入" />
				</view>
				<view class="form-row">
					<view class="form-label">上次就诊科室</view>
					<input class="form-input" v-model="form.lastDepartmentName" :placeholder-style="placeholderStyle"
						placeholder="请输入" />
				</view>
				<view class="form-row">
					<view class="form-label">就诊时间</view>
					<view class="form-select">
						<picker mode="date" :value="form.lastVisitTime" @change="onDateChange">
							<view class="form-input" v-if="form.lastVisitTime">{{ form.lastVisitTime  }}</view>
							<view class="placeholder" v-else>请选择</view>
						</picker>
						<u-icon name="arrow-right" color="#bbb" style="margin-top: 2rpx;"></u-icon>
					</view>
				</view>
				<view class="form-row no-border">
					<view class="form-label">上次诊断结果</view>
				</view>
				<textarea class="textarea " v-model="form.lastVisitResult" :placeholder-style="placeholderStyle"
					placeholder="请输入" :maxlength="100" />
				<view class="textarea-count">{{ form.lastVisitResult.length }}/100</view>
			</view>

			<!-- 病情描述 -->
			<view class="section-card">
				<view class="title-container">
					<view class="section-title">病情描述</view>
					<view class="title-bg"></view>
				</view>
				<textarea class="textarea" v-model="form.diseaseDescription" :placeholder-style="placeholderStyle"
					placeholder="请输入" :maxlength="200" />
				<view class="textarea-count">{{ form.diseaseDescription.length }}/200</view>
			</view>

			<!-- 相关病历资料上传 -->
			<view class="section-card">
				<view class="bingli-header">
					<view class="title-container">
						<view class="section-title">相关病历资料</view>
						<view class="title-bg"></view>
					</view>
					<text class="section-tip">（上传相关病历仅自己与医生可见）</text>
				</view>
				<u-upload ref="upLoad" @on-remove="onRemove" :action="action" max-count="9"
					@on-success="onUploadSuccess">
				</u-upload>
				<view class="img-tip">
					（可上传病历、医嘱、入院单、出院单、检验检查结果、处方笺、患处照片等，最多可以上传9张）
				</view>
			</view>

			<!-- 其他情况 -->
			<view class="section-card">
				<view class="title-container">
					<view class="section-title">其他情况</view>
					<view class="title-bg"></view>
				</view>
				<view class="radio-group">
					<view :class="form.statusPreHistory == 0? 'radio-row' : 'radio-row no-border'">
						<view class="radio-label">既往史</view>
						<u-radio-group v-model="form.statusPreHistory">
							<u-radio :name="0">无</u-radio>
							<u-radio :name="1">有</u-radio>
						</u-radio-group>
					</view>
					<view v-if="form.statusPreHistory === 1" class="radio-input-row">
						<textarea class="textarea" v-model="form.preHistory" :placeholder-style="placeholderStyle"
							placeholder="请填写曾经患病情况及慢性病患情况（如高血压、糖尿病等）" maxlength="500" />
						<view class="textarea-count">{{ form.preHistory.length }}/500</view>
					</view>

					<view :class="form.statusAllergy == 0? 'radio-row' : 'radio-row no-border'">
						<view class="radio-label">过敏史</view>
						<u-radio-group v-model="form.statusAllergy">
							<u-radio :name="0">无</u-radio>
							<u-radio :name="1">有</u-radio>
						</u-radio-group>
					</view>
					<view v-if="form.statusAllergy === 1" class="radio-input-row">
						<textarea class="textarea" v-model="form.allergy" :placeholder-style="placeholderStyle"
							placeholder="请填写过往药物或其它过敏情况" maxlength="500" />
						<view class="textarea-count">{{ form.allergy.length }}/500</view>
					</view>

					<view :class="form.statusFamilyHistory == 0? 'radio-row' : 'radio-row no-border'">
						<view class="radio-label">家族史</view>
						<u-radio-group v-model="form.statusFamilyHistory">
							<u-radio :name="0">无</u-radio>
							<u-radio :name="1">有</u-radio>
						</u-radio-group>
					</view>
					<view v-if="form.statusFamilyHistory === 1" class="radio-input-row">
						<textarea class="textarea" v-model="form.familyHistory" :placeholder-style="placeholderStyle"
							placeholder="请填写直系亲属的遗传病患病情况" maxlength="500" />
						<view class="textarea-count">{{ form.familyHistory.length }}/500</view>
					</view>
				</view>
			</view>

			<!-- 授权勾选 -->
			<view class="auth-row">
				<checkbox v-model="form.auth" class="auth-checkbox" />
				<text class="auth-text">授权本院获取病情描述和图片并提供相关服务</text>
				<text class="auth-link">《用户须知》</text>
			</view>

			<!-- 下一步按钮 -->
			<ButtonVue @click="nextStep" content="下一步"></ButtonVue>
		</view>
	</view>
</template>

<script>
	import UserInfoCardVue from '../../components/UserInfo/UserInfoCard.vue';
	import {
		mapGetters
	} from 'vuex';
	import {
		doctorConsultationAdd
	} from '../../api/doctorConsultation';
	import {
		dateFormat
	} from '../../utils/assist';
	export default {
		components: {
			UserInfoCardVue
		},
		computed: {
			...mapGetters([
				'hostApi', "userInfo"
			]),
			action() {
				return this.hostApi + '/upload/bingliInfo'
			},
			getToday() {
				return dateFormat("yyyy-MM-dd", new Date());
			}
		},
		data() {
			return {
				form: {
					"patId": "",
					"patName": "",
					"departmentCode": "",
					"departmentName": "",
					"doctorCode": "",
					"doctorName": "",
					"consultationType": "",
					"consultationTypeName": "",
					"createTime": "",
					"consultationResult": "",
					"prescription": "",
					"medicationGuidance": "",
					"consultationNo": "",
					"sort": 0,
					"diseaseDescription": "",
					"medicalRecords": "",
					"campusCode": "",
					"campusName": "",
					"preHistory": "",
					"statusPreHistory": "",
					"allergy": "",
					"statusAllergy": "",
					"familyHistory": "",
					"statusFamilyHistory": "",
					"marryHistory": "",
					"statusMarryHistory": "",
					"status": 1,
					"lastCampusName": "",
					"lastDepartmentName": "",
					"lastVisitTime": "",
					"lastVisitResult": ""
				},
				list: [], //图片上次
				placeholderStyle: "font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;font-weight: 400;font-size: 14px;color: #999999;line-height: 15px;font-style: normal;text-transform: none;"
			}
		},
		mounted() {},
		methods: {
			onDateChange(e) {
				console.log(e)
				this.form.lastVisitTime = e.detail.value
			},
			uploadImage() {
				// 上传图片逻辑
			},
			onUploadSuccess(data, index, lists) {

				if (data.result) {
					this.list.push(data.result);
				}

			},
			onRemove(e) {
				this.list.splice(e, 1);
			},
			nextStep() {
				this.form.medicalRecords = this.list.join(",")
				console.log(this.form, '2333');
				if (!this.form.auth) {
					this.$u.toast('需要同意并授权')
					return
				}
				doctorConsultationAdd(this.form).then(res => {
					console.log(res)
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.condition-page {
		background: linear-gradient(#e0f3ff 0%, #fff 30%);
		min-height: 100vh;
		padding: 16rpx;
	}

	.placeholder {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 14px;
		color: #999999;
		line-height: 15px;
		text-align: right;
		font-style: normal;
		text-transform: none;
	}

	.user-card {
		display: flex;
		align-items: center;
		background: linear-gradient(90deg, #F0FEFF 0%, #b6e0f7 85%, #F0FEFF 100%);
		border-radius: 16rpx 16rpx 0 0;
		padding: 32rpx 40rpx 24rpx;
		position: relative;
	}

	.avatar {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}

	.user-info {
		flex: 1;
	}

	.user-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #222;
	}

	.user-id {
		font-size: 24rpx;
		color: #666;
		margin-top: 8rpx;
	}

	.switch-user {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 6rpx;
		color: #1ec6e6;
		font-size: 24rpx;
	}

	.switch-icon {
		width: 38rpx;
		height: 38rpx;
		margin-right: 8rpx;
	}

	.section-card {
		border-radius: 16rpx;
		padding: 24rpx 24rpx 6rpx 18rpx;
	}

	.bingli-header {
		display: flex;
	}

	.title-container {
		position: relative;
		margin-bottom: 16px;
	}

	.section-title {
		position: relative;
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		z-index: 1;
	}

	.title-bg {
		position: absolute;
		width: 48rpx;
		height: 15rpx;
		background-color: rgba(65, 207, 230, 0.5);
		bottom: -2rpx;
		left: 36rpx;
		z-index: 0
	}

	.section-tip {
		font-size: 22rpx;
		color: #888;
		padding-top: 6rpx;
	}

	.form-row.no-border {
		border-bottom: none !important;
		padding-bottom: 0;
	}

	.form-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #f0f0f0;
		padding: 16rpx 6rpx;
		margin: 16rpx 0;
		font-size: 26rpx;
	}

	.form-label {
		width: 180rpx;
		color: #333;
	}

	.form-select {
		display: flex;
	}

	.form-input {
		flex: 1;
		text-align: right;
		font-size: 26rpx;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		color: #333333;
		line-height: 15px;
		text-align: right;
		font-style: normal;
		text-transform: none;
	}

	.form-value {
		flex: 1;
		color: #333;
		text-align: right;
		font-size: 26rpx;
	}

	.textarea.result {
		height: 150rpx;
	}

	.textarea {
		width: 90%;
		background: #F4F4F4;
		border-radius: 12rpx;
		margin: 0 18rpx;
		padding: 6px 10px 25px 10px;
		font-size: 26rpx;
		color: #333;
		margin-top: 8rpx;
		border: none;
	}

	.textarea-count {
		position: relative;
		text-align: right;
		color: #bbb;
		font-size: 22rpx;
		margin: -20px 20px 0 0;
	}

	.img-list {
		display: flex;
		margin-top: 8rpx;
	}

	.img-item {
		margin-right: 16rpx;
		margin-bottom: 16rpx;
	}

	.img-thumb {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		object-fit: cover;
	}

	.img-upload {
		width: 120rpx;
		height: 120rpx;
		background: #f5f9ff;
		border: 1px dashed #b6e0f7;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #bbb;
		font-size: 60rpx;
	}

	.plus {
		font-size: 60rpx;
		color: #bbb;
	}

	.img-tip {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 12px;
		color: #EA0000;
		line-height: 18px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.radio-group {
		margin: 8rpx 8rpx 0;
		padding: 0 20rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		border: 1px solid #f0f0f0;
	}

	.radio-row.no-border {
		border-bottom: none !important;
		padding-bottom: 0;
	}

	.radio-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 6rpx;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 500;
		font-size: 13px;
		color: #666666;
		line-height: 13px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.radio-label {
		width: 120rpx;
		font-size: 26rpx;
	}

	.radio-item {
		margin-right: 32rpx;
		font-size: 26rpx;

		radio {
			transform: scale(0.8);
			margin-right: 8rpx;
		}
	}

	.radio-input-row {
		margin: 12rpx 0 24rpx 0;
	}

	.radio-input {
		width: 90%;
		height: 150rpx;
		background: #f5f9ff;
		border-radius: 8rpx;
		padding: 16rpx;
		font-size: 26rpx;
		border: none;
	}

	.auth-row {
		display: flex;
		margin: 12rpx 24rpx 0 24rpx;
	}

	.auth-checkbox {
		transform: scale(0.6);
	}

	.auth-text {
		color: #666;
		font-size: 22rpx;
		margin-top: 6rpx;
	}

	.auth-link {
		color: #1ec6e6;
		font-size: 22rpx;
		margin-left: 8rpx;
		text-decoration: underline;
		margin-top: 6rpx;
	}

	.next-btn {
		width: 90%;
		margin: 40rpx 5% 0 5%;
		height: 88rpx;
		background: linear-gradient(90deg, #6ed6f7 0%, #3ec6e7 100%);
		color: #fff;
		font-size: 32rpx;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		box-shadow: 0 4rpx 12rpx rgba(65, 207, 230, 0.15);
		border: none;
	}
</style>